<template>
  <div class="age-container">
    <!-- 标题 -->
    <div class="title">
      <p class="gender-percent">年龄比例</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 图表容器 -->
    <div ref="ageRef" class="age-box"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const ageRef = ref();
onMounted(() => {
  const echart = echarts.init(ageRef.value);
  echart.setOption({
    title: { // 饼图的标题
      text: "本日总量",
      left: 124,
      top: "center",
      textStyle: {
        color: "white",
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: 40,
      right: 30,
      orient: "vertical",
      textStyle: {
        color: "white",
        fontSize: 18,
      },
    },
    series: [
      {
        name: "本日总数", // 系列名字
        type: "pie",
        radius: ["40%", "80%"], // 饼图的内半径和外半径
        center: ["36%", "50%"], // 饼图圆心的横坐标和纵坐标
        avoidLabelOverlap: false, // 避免标签重叠
        itemStyle: { // 饼图的每一块
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: { // 饼图上展示的文字
          show: true,
          position: "inside",
          color: "white",
          formatter: "{c}%",
          fontSize: 16,
        },
        emphasis: { // 饼图每一块高亮时的样式
          label: {
            show: true,
            fontSize: 30,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [ // 饼图展示使用的数据
          { value: 16, name: "10岁以下" },
          { value: 8, name: "10 - 18岁" },
          { value: 12, name: "10 - 30岁" },
          { value: 24, name: "30 - 40岁" },
          { value: 20, name: "40 - 60岁" },
          { value: 20, name: "60岁以上" },
        ],
      },
    ],
  });
});
</script>

<style scoped lang="scss">
// 父元素已开启flex布局
.age-container {
  flex: 1;
  background: url("../../images/dataScreen-main-lb.png");
  background-size: 100% 100%;
  .title {
    .gender-percent {
      color: white;
      font-size: 20px;
    }
  }
  .age-box {
    width: 100%;
    height: 240px;
  }
}
</style>
